<script setup lang='ts'>
import VideoCard from '../video-card/index.vue'
import { useRecommendStore } from '../../store/index'

import type { RecommendCard } from '../../store/index';
import { onMounted, ref } from 'vue';
const store = useRecommendStore()
const recommendList = ref<RecommendCard[]>()
const domRef = ref()
const emit = defineEmits(['getOffsetTop'])
onMounted(async () => {
    await store.getData()
    recommendList.value = store.getLive
    emit('getOffsetTop', domRef.value.offsetTop)
})
</script>
<template>
    <!--头部应该迁移到组件外用插槽的形式插入，懒得写了-->
    <div class="channel-container" ref="domRef">
        <div class="header">
            <div class="channel-name">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-jiangbei"></use>
                </svg>
                <span class="title">直播</span>
            </div>
        </div>
        <div class="recommend-list">
            <VideoCard :video-info="item" v-for="(item,index) in recommendList" :key="index" class="list-item">
            </VideoCard>
        </div>
    </div>
</template>
<style lang='less' scoped>
.channel-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    // grid-gap: 60px 40px;
    padding: 30px 0;
    border-top: 4px solid var(--line_light);
    border-bottom: 4px solid var(--line_light);

    .header {
        width: 100%;
        height: 34px;
        margin-bottom: 12px;
        display: flex;
        grid-column: span 5;

        .channel-name {
            .icon {
                font-size: 34px;
                margin-right: 6px;
            }

            .title {
                font-size: 24px;
                // font-weight: 700;
            }
        }
    }

    .recommend-list {
        grid-column: span 5;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 60px 40px;

        .list-item {
            grid-column: span 1;
        }
    }
}
</style>